<template>
  <div class="table-wrapper">
    <div class="search-container">
      <div class="search-wrapper">
        <span class="label">开始年份：</span>
        <el-date-picker
          size="mini"
          v-model="params.start_time"
          type="year"
          value-format="yyyy"
          placeholder="选择开始年份"
        >
        </el-date-picker>
      </div>
      <div class="search-wrapper">
        <span class="label">结束年份：</span>
        <el-date-picker
          size="mini"
          v-model="params.end_time"
          type="year"
          value-format="yyyy"
          placeholder="选择结束年份"
        >
        </el-date-picker>
      </div>
      <div class="search-wrapper">
        <span class="label">统计类型：</span>
        <el-select size="mini" v-model="params.type" placeholder="请选择统计类型">
          <el-option v-for="item in typeList" :key="item.text" :label="item.text" :value="item.value"></el-option>
        </el-select>
      </div>
    </div>
    <div class="search-container">
      <div class="search-wrapper">
        <span class="label">图形类型：</span>
        <el-select size="mini" v-model="params.chartType" placeholder="请选择图形类型">
          <el-option v-for="item in chartTypes" :key="item.text" :label="item.text" :value="item.value"></el-option>
        </el-select>
      </div>
      <div class="search-wrapper">
        <el-button @click="getTotalEnergy" icon="el-icon-search" size="mini" >查询</el-button>
      </div>
    </div>
    <common-chart class="common-chart" :chart-type="params.chartType" size="big" :data="chart"></common-chart>
  </div>
</template>

<script>
import CommonChart from '@/views/pages/components/CommonChart'
import portal from '@/api/portal'

export default {
  name: 'EnergyChartWater',
  data () {
    return {
      params: {
        page: 1,
        start_time: null,
        end_time: null,
        chartType: 'bar',
        type: 3
      },
      chartTypes: [
        {
          text: '柱状图',
          value: 'bar'
        },
        {
          text: '折线图',
          value: 'line'
        }
      ],
      typeList: [
        {
          text: '用水总量',
          value: 3
        },
        {
          text: '用水同比变化',
          value: 4
        }],
      data: [],
      chart: {
        name: '水总量分析',
        title: '',
        xAxis: [],
        legend: []
      }
    }
  },
  components: {
    CommonChart
  },
  created () {
  },
  computed: {
  },
  mounted () {
  },
  methods: {
    async getTotalEnergy () {
      if (!this.params.start_time) {
        this.$message.success('请选择开始时间')
        return
      }
      if (!this.params.end_time) {
        this.$message.success('请选择结束时间')
        return
      }
      if (!this.params.type) {
        this.$message.success('请选择统计类型')
        return
      }
      const params = {
        start_time: this.params.start_time,
        end_time: this.params.end_time,
        type: this.params.type
      }
      const res = await portal.getTotalEnergy(params)
      if (res.data) {
        const records = res.data
        this.chart.title = '水总量分析'
        const xAxisData = []
        records.forEach((e, index) => {
          if (!index) {
            for (const c in e.data) {
              if (c.indexOf('20') === 0) {
                xAxisData.push(c)
              }
            }
          }
        })
        xAxisData.sort()
        const series = []
        const legend = []
        records.forEach(item => {
          legend.push(item.xq)
          series.push(
            {
              type: 'bar',
              name: item.xq,
              barWidth: '12%',
              label: {
                show: true,
                position: 'top',
                textStyle: { color: '#fff', fontSize: 14, fontStyle: 'oblique' }
              },
              data: xAxisData.map(key => item.data[key])
            }
          )
        })
        this.chart.series = series
        this.chart.legend = legend
        this.chart.xAxis = [
          { data: xAxisData }
        ]
      }
    }
  }
}
</script>

<style scoped lang="scss">

</style>
